<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax2.js"></script>
    
    <style type="text/css">
        .container{
            padding-top: 100px;
        }
        #ul1{
            display: none;
        }

    </style>
</head>
<body>
    <div class="container">
         <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入内容" id="search1">
        <ul id="ul1">
            <script type="text/html" id="tel1">
                {{each ha}}
                <li>{{$value}}</li>
                {{/each}}
            </script>
            <li>haha</li>
        </ul>
    </div>
    </div>


    <script>
      const searchObj = document.querySelector("#search1")
      const ulObj = document.querySelector("#ul1")
      

      searchObj.oninput = function(){
          console.log(this.value)
          const key = this.value

          //非空判断
          if(key.trim().length==0){
            ulObj.style.display='none'
              return ;
          }
          //不为空发送请求
          ajax({
              type:"GET",
              url:"http://www.biwuit.cn/spboot/searchByKey",
              data:{
                  keyword:key
              },
              success:function(data){
                  if(data.length!=0){
                      const dataArr = data.split(",");
                      const lis = template("tel1",{ha:dataArr})
                      ulObj.innerHTML = lis;
                      ulObj.style.display = 'block'

                  }
              }
          })
          

      }

    </script>
</body>
</html>